<template>

  <div>

    <el-card v-for="item in paperList" style="margin-bottom: 10px; line-height: 30px;">

      <el-row :gutter="20">
        <el-col :span="12">
          考试时间：{{ item.createTime }}
        </el-col>

        <el-col :span="12">
          考试用时：{{ item.userTime }}分钟
        </el-col>

        <el-col :span="12">
          考试得分：{{ item.userScore }}
        </el-col>

        <el-col :span="12">
          是否合格：{{ item.userScore > item.qualifyScore ?'是':'否' }}
        </el-col>

        <el-col :span="12">
          正确/总数：{{ item.rightCount || 0 }}/{{ item.totalCount || 0 }}
        </el-col>

        <el-col :span="12">
          题目正确率：{{ (item.accuracy != null ? item.accuracy : 0) }}%
        </el-col>

        <el-col :span="12">
          错题分布：
          单选 {{ item.wrongRadioCount || 0 }}，
          多选 {{ item.wrongMultiCount || 0 }}，
          判断 {{ item.wrongJudgeCount || 0 }}
        </el-col>

        <el-col :span="12">
          错误最多题型：
          <span v-if="item.worstType === 1">单选</span>
          <span v-else-if="item.worstType === 2">多选</span>
          <span v-else-if="item.worstType === 3">判断</span>
          <span v-else>—</span>
        </el-col>

        <el-col :span="12">
          考试状态：{{ item.state | paperStateFilter }}
        </el-col>

        <el-col :span="24" style="margin-top: 10px;">
          <div v-if="item.resultData && item.resultData.quList">
            <div v-for="qu in item.resultData.quList" :key="qu.id" class="qu-content">
              <p>{{ qu.sort + 1 }}. {{ qu.content }}（得分：{{ qu.actualScore }}）
                <span v-if="qu.isRight" style="color:#24da70;">（正确）</span>
                <span v-else style="color:#ff0000;">（错误）</span>
              </p>
              <p v-if="qu.image"><el-image :src="qu.image" style="max-width:100%;" /></p>

              <div v-if="qu.quType === 1 || qu.quType === 3">
                <div v-for="an in qu.answerList" :key="an.id">
                  <span :style="{color: an.isRight ? '#24da70' : (an.checked ? '#409EFF' : '#606266')}">
                    {{ an.abc }}. {{ an.content }}
                    <span v-if="an.isRight">（正确）</span>
                    <span v-else-if="an.checked">（我的选择）</span>
                  </span>
                  <div v-if="an.image" style="clear:both"><el-image :src="an.image" style="max-width:100%;" /></div>
                </div>
              </div>

              <div v-if="qu.quType === 2">
                <div v-for="an in qu.answerList" :key="an.id">
                  <span :style="{color: an.isRight ? '#24da70' : (an.checked ? '#409EFF' : '#606266')}">
                    {{ an.abc }}. {{ an.content }}
                    <span v-if="an.isRight">（正确）</span>
                    <span v-else-if="an.checked">（我的选择）</span>
                  </span>
                  <div v-if="an.image" style="clear:both"><el-image :src="an.image" style="max-width:100%;" /></div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

      </el-row>

    </el-card>

    
  </div>

</template>

<script>

import { listPaper } from '@/api/paper/paper'
import { paperResult } from '@/api/paper/exam'

export default {

  name: 'UserPaperList',
  props: {
    examId: {
      type: String,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      value1: null,
      paperList: []
    }
  },

  watch: {

    // 检测查询变化
    examId: {
      handler() {
        this.fetchPaperList()
      },
      deep: true
    },

    // 检测查询变化
    userId: {
      handler() {
        this.fetchPaperList()
      },
      deep: true
    }
  },

  created() {
    this.fetchPaperList()
  },
  methods: {

    fetchPaperList() {
      listPaper(this.userId, this.examId).then(response => {
        this.paperList = response.data.records
        // 加载题目总览
        this.$nextTick(() => this.fetchPaperResultForAll())
      })
    },
    // 为每个试卷拉取题目总览
    fetchPaperResultForAll(){
      if(!this.paperList || this.paperList.length === 0){
        return
      }
      const requests = this.paperList.map(item => paperResult({ id: item.id }))
      Promise.all(requests).then(resArr => {
        resArr.forEach((res, idx) => {
          const data = res && res.data ? res.data : { quList: [] }
          // 将结果挂到对应的条目下
          this.$set(this.paperList[idx], 'resultData', data)
        })
      })
    }
  }
}
</script>
